<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>4.1节,单元行上鼠标悬停提示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="../../extend/animateManage.js"></script>
</head>
<style>
    /*========公共==========*/
    h2,h5,#tooltipMsg,p{
        white-space: nowrap;
    }
    td{
        border: 1px solid #ccc;
        height: 50px;
        text-align: center;
        font-size: 10pt;
        padding: 2px;
    }
    /*============= 单元行上鼠标悬停提示 ===============*/
    #tooltipMsg{
        position: absolute;
        border: 1px solid #ccc;
        display: none;
        color: #ccc;
        font-size: 12px;
        padding: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        z-index: 1;
    }
</style>
<body>
    <h2>单元行上鼠标悬停提示</h2>
    <table id='tooltip' border="1" width="100">
        <tr data-tooltip="第1行提示">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr data-tooltip="第2行提示">
            <td>3</td>
            <td>4</td>
        </tr>
        </table>
        <div id='tooltipMsg'>我是提示信息</div>
<script type="text/javascript">
    window.onload = function(){
        var
        setCss = function(_this, cssOption){//设置元素样式
            //判断节点
            if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
                return;
            }
            for(var cs in cssOption){
                _this.style[cs] = cssOption[cs];
            }
            return _this;
        },

        _mousepos = {//鼠标在页面上的位置
            "top":0,
            "left":0
        },

        /**
         * 获取鼠标在页面上的位置
         * _e		触发的事件
         * left:鼠标在页面上的横向位置, top:鼠标在页面上的纵向位置
         */
        getMousePoint = function (_e) {
            var _body = document.body,
                    _left = 0,
                    _top = 0
                    ;
            //浏览器支持 pageYOffset, 那么可以使用pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
            if(typeof window.pageYOffset != 'undefined') {
                _left = window.pageXOffset;
                _top = window.pageYOffset;
            }
            //如果浏览器指定了DOCTYPE并且支持compatMode
            else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
                _left = document.documentElement.scrollLeft;
                _top = document.documentElement.scrollTop;
            }
            //其他的如果浏览器支持document.body
            else if(typeof _body != 'undefined') {
                _left = _body.scrollLeft;
                _top = _body.scrollTop;
            }

            _left += _e.clientX;
            _top += _e.clientY;

            _mousepos.left = _left;
            _mousepos.top = _top;

            return _mousepos;
        },

        //参数---e被绑定的节点；tooltipMsg显示信息的节点
        tooltip = function(e, tooltipMsg){
            var trE = e.rows,//获取被遍历的tr节点对象
                    trLen = trE.length,//获取被遍历的节点长度
                    i = 0;

            for(; i < trLen ; i++){//遍历被提示的对象
                var trEi = trE[i],
                        dataTooltip = trEi.getAttribute("data-tooltip");//获取数据

                if(dataTooltip){//如果存在 data-tooltip 数据则绑定响应的事件
                    trEi.onmousemove = function(event){//显示提示信息
                        event = event || _W.event;
                        var _pos = getMousePoint(event);
                        tooltipMsg.innerHTML = this.getAttribute("data-tooltip");//修正提示信息的坐标
                        setCss(tooltipMsg,{
                            "left":_pos.left + "px",
                            "top": (_pos.top+18) + "px",
                            //显示信息
                            "display":"inline"
                        })
                    }

                    trEi.onmouseout = function(){//隐藏提示信息
                        setCss(tooltipMsg,{//隐藏信息
                            "display":"none"
                        })
                    }
                }

            }

        };
        tooltip(document.getElementById("tooltip"), document.getElementById("tooltipMsg"));
    };
</script>
</body>
</html>